<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OFF the Record</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script src="/OffTheRecord/js/jquery.validate.js"></script>
<script language="javascript" type="text/javascript"
	src="/OffTheRecord/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
	src="/OffTheRecord/js/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="/OffTheRecord/js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
	src="/OffTheRecord/js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="/OffTheRecord/js/jqplot.pointLabels.min.js"></script>

<script type="text/javascript">

	$(document).ready(function() {
		<c:set value="${adminVo.adminId }" var="admin"/>
		<c:set value="${userVo.userId }" var="user"/>
		var admin = "<c:out value="${admin}"/>";
		var user = "<c:out value="${user}"/>";
		if(user.length == 0 && admin.length == 0){
			var c = confirm("로그인 하시겠습니까?");
			if(c)
				window.open("/OffTheRecord/common/login.jsp", "","resizable=no,toolbar=no,width=400, height=300");
			else
				location.href="/OffTheRecord/index/index.jsp";
		}
		$('#chart1').hide();
		$('#toggleBtn').click(function() {
			$('#chart1').toggle(); // 사진이 로딩되는 시간
			"<c:set value="${select1 }" var="s1" />";
			"<c:set value="${select2 }" var="s2" />";
			"<c:set value="${select3 }" var="s3" />";
			var sn1 = "<c:out value="${s1}" />";
			var sn2 = "<c:out value="${s2}" />";
			var sn3 = "<c:out value="${s3}" />";

			var slistName = [];
			var listselect1 = [];
			var listselect2 = [];
			var listselect3 = [];
			"<c:forEach items="${sclist}" var="slist">";
			slistName.push("${slist.companyName}");
			listselect1.push("${slist.select1}");
			listselect2.push("${slist.select2}");
			listselect3.push("${slist.select3}");
			"</c:forEach>";

			var s2 = [ listselect1[0], listselect2[0], listselect3[0] ];
			var s3 = [ listselect1[1], listselect2[1], listselect3[1] ];
			var s4 = [ listselect1[2], listselect2[2], listselect3[2] ];
			// Can specify a custom tick Array.
			// Ticks should match up one for each y value (category) in the series.
			var ticks = [ sn1, sn2, sn3 ];

			var plot1 = $.jqplot('chart1', [ s2, s3, s4 ], {
				// The "seriesDefaults" option is an options object that will
				// be applied to all series in the chart.
				seriesDefaults : {
					renderer : $.jqplot.BarRenderer,
					rendererOptions : {
						fillToZero : true
					}
				},
				// Custom labels for the series are specified with the "label"
				// option on the series option.  Here a series option object
				// is specified for each series.
				series : [ {
					label : slistName[0]
				}, {
					label : slistName[1]
				}, {
					label : slistName[2]
				} ],
				// Show the legend and put it outside the grid, but inside the
				// plot container, shrinking the grid to accomodate the legend.
				// A value of "outside" would not shrink the grid and allow
				// the legend to overflow the container.
				legend : {
					show : true,
					placement : 'outsideGrid'
				},
				axes : {
					// Use a category axis on the x axis and use our custom ticks.
					xaxis : {
						renderer : $.jqplot.CategoryAxisRenderer,
						ticks : ticks
					},
					// Pad the y axis just a little so bars can get close to, but
					// not touch, the grid boundaries.  1.2 is the default padding.
					yaxis : {
						min : 1,
						max : 5.5,
						numberTicks : 5, // 인위적으로 축을 나누는 개수
						tickOptions : {
							formatString : '%i.0'
						}
					}
				}
			});
		});
		var listName = [];
		var listTotal = [];
		"<c:forEach items="${clist}" var="clist">";
		listName.push("${clist.companyName}");
		listTotal.push("${clist.companyTotalScore}");
		"</c:forEach>";
		var plot2 = $.jqplot('chart2', [ listTotal ], {
			// Give the plot a title.
			title : 'Total 평점순',
			// You can specify options for all axes on the plot at once with
			// the axesDefaults object.  Here, we're using a canvas renderer
			// to draw the axis label which allows rotated text.
			axesDefaults : {
				labelRenderer : $.jqplot.CanvasAxisLabelRenderer
			},
			// An axes object holds options for all axes.
			// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
			// Up to 9 y axes are supported.
			axes : {
				// options for each axis are specified in seperate option objects.
				xaxis : {

					label : "회사",
					renderer : $.jqplot.CategoryAxisRenderer,
					tickOptions : {
						fontSize : '10pt',
						showGridline : false
					},
					ticks : listName,
					// Turn off "padding".  This will allow data point to lie on the
					// edges of the grid.  Default padding is 1.2 and will keep all
					// points inside the bounds of the grid.

					pad : 0
				},
				yaxis : {
					min : 1, // 최소값
					max : 5.4, // 최대값
					numberTicks : 5, // 인위적으로 축을 나누는 개수
					tickOptions : {
						formatString : '%i.0'
					}
				}
			}
		});
	});
	function checkForm(){
		var frm = document.searchForm;
		//alert(frm.regionName.value);
		if(frm.regionName.value == "" ){
			alert("지역 이름을 입력하세요");
			return frm.regionName.focus();
		}
		if(frm.industryName.value == ""){
			alert("산업 이름을 입력하세요");
			return frm.industryName.focus();
		}
		if(frm.industryName.value == ""){
			alert("산업 이름을 입력하세요");
			return frm.industryName.focus();
		}
		if(frm.companySalary.value == ""){
			alert("연봉을 입력하세요");
			return frm.companySalary.focus();
		}
		
		
		frm.submit();
		
	}
</script>
<style type="text/css">
table.jqplot-table-legend,table.jqplot-cursor-legend {
	background-color: rgba(255, 255, 255, 0.6);
	border: 1px solid #ccc;
	position: absolute;
	font-size: .75em;
}

table.jqplot-table-legend {
	margin-top: 12px;
	margin-bottom: 12px;
	margin-left: 12px;
	margin-right: 12px;
}

.jqplot-yaxis {
	margin-right: 10px;
}

.jqplot-axis {
	font-size: .75em;
}

.jqplot-target {
	position: relative;
	color: #666;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
}

div.jqplot-target {
	position: relative;
	font-size: 1em;
}

div.jqplot-table-legend-swatch {
	width: 0;
	height: 0;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
}

user agent stylesheettable {
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
	border-color: gray;
}
</style>
</head>
<body>
<c:if test="${sessionScope.adminVo!=null || sessionScope.userVo != null }">
<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 60px;"></div>

<div class="container">
<div class="row">

	<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4" style="border: 1px solid lightgray; border-radius: 5px; padding: 10px;">
					<h5 align="center">
						<span class="glyphicon glyphicon-search"> 맞춤형 검색 
					</h5>
					<hr size="1" color="lightgray">

					<!-- form -->
					<form class="form-horizontal" name="searchForm"
						action="/OffTheRecord/customCompany.action" method="post"
						id="searchForm" role="form">

						<!-- 지역 -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="region_name">지역:</label>
							<div class="col-lg-9">
								<input type="text" class="form-control" list="regionName" name="regionName" id="region_name">
								<datalist id="regionName"> <c:forEach
									items="${listMap.regionList }" var="rlist">
									<option id="rlist" value="${rlist.regionName}">
								</c:forEach> </datalist>
							</div>
						</div>
						<!-- 지역 -->
<p></p>
						<!-- 산업 -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="company_name">산업:</label>
							<div class="col-lg-9">
								<input type="text" class="form-control" list="industryName" name="industryName"
									id="industry_name">
								<datalist id="industryName"> <c:forEach
									items="${listMap.industryList }" var="ilist">
									<option value="${ilist.industryName}">
								</c:forEach> </datalist>
							</div>
						</div>
						<p></p>
						<!-- 산업 -->

						<!-- 연봉 -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="Salary">연봉:</label>
							<div class="col-lg-9">
								<input type="text" class="form-control" type="text" id="company_salary" name="companySalary"
									placeholder="'만'단위 숫자로 입력해주세요.">
							</div>
						</div>
						<p></p>
						<!-- 연봉 -->

						<!-- 라디오 -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							
								<label class="control-label col-lg-3" for="score">평점:</label>

								<div class="btn-group col-lg-9" data-toggle="buttons">
									<label class="btn btn-primary btn-sm"><input
										type="radio" name="score" value="1" id="score">1</label> <label
										class="btn btn-primary btn-sm"><input type="radio"
										name="score" value="2" id="score">2</label> <label
										class="btn btn-primary btn-sm"><input type="radio"
										name="score" value="3" id="score">3</label> <label
										class="btn btn-primary btn-sm"><input type="radio"
										name="score" value="4" id="score">4</label>
								</div>
								<span id="scoreChanceSpan"></span>
							
						</div>
						<p></p>
						
						<!-- 라디오 -->

						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="score">1순위:</label>
						
							<div class="col-lg-9">
								<select class="form-control" name="select1">
									<option>선택</option>
									<option value="scoreChance">승진기회 및 가능성</option>
									<option value="scoreWelfare">복지 및 급여</option>
									<option value="scoreCulture">사내 문화</option>
									<option value="scoreHoliday">휴가 자율성</option>
									<option value="scoreExecutive">경영진</option>
									<option value="scoreOverdue">초과근무</option>
								</select>&nbsp;
							</div>
						</div>

						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="score">2순위:</label>
								
							<div class="col-lg-9">
								<select class="form-control" name="select2">
									<option>선택</option>
									<option value="scoreChance">승진기회 및 가능성</option>
									<option value="scoreWelfare">복지 및 급여</option>
									<option value="scoreCulture">사내 문화</option>
									<option value="scoreHoliday">휴가 자율성</option>
									<option value="scoreExecutive">경영진</option>
									<option value="scoreOverdue">초과근무</option>
								</select>&nbsp;
							</div>
						</div>

						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<label class="control-label col-lg-3" for="score">3순위:</label>
								
							<div class="col-lg-9">	
								<select class="form-control
								" name="select3">
									<option>선택</option>
									<option value="scoreChance">승진기회 및 가능성</option>
									<option value="scoreWelfare">복지 및 급여</option>
									<option value="scoreCulture">사내 문화</option>
									<option value="scoreHoliday">휴가 자율성</option>
									<option value="scoreExecutive">경영진</option>
									<option value="scoreOverdue">초과근무</option>
								</select>&nbsp;
							</div>
						</div>

						<div class="button-submit col-lg-12">
							<div class="col-sm-3 col-md-3 col-lg-3"></div>
							<div class="col-sm-3 col-md-3 col-lg-3">
								<button type="submit" class="btn btn-success"
									onclick="checkForm()">검색</button>
							</div>
							<div class="col-sm-3 col-md-3 col-lg-3"></div>
						</div>
					</form>
				</div>
				<!-- top-left -->
				
<c:choose>
					<c:when test="${clist == null }">
					<div class="no-company col-">
						회사가 없습니다.
					</div>
						
					</c:when>
					<c:otherwise>
					
						
						<!--  -->
						<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8">
								<div class="col-lg-12 col-sm-12 col-md-12 col-lg-12" id="chart2"
									style="width: 550px; height: 200px"></div>
								<br>순위 자세히 보기 <a href="#" class="btn btn-success"
									id="toggleBtn"><span>클릭</span></a> <br>
								<div class="col-lg-12 col-sm-12 col-md-12 col-lg-12" id="chart1"
									style="width: 550px; height: 200px"></div>
							</div>
							<!--  -->
							
							<div class="col-lg-12">
								<hr color="lightgray" size="1">
							</div>
							<c:forEach items="${clist }" var="clist">
							
							
						<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8" style="margin-left: 18%;">
							<div class="company-view col-xs-12 col-sm-12 col-md-12 col-lg-12"
								style="border: 1px solid lightgray; border-radius: 5px; padding: 10px; margin: 5px;">

								<div class="col-xs-2"
									onclick="location.href='/OffTheRecord/getCompanyReview.action?companyId=${clist.companyId }'">
									<c:if test="${clist.companyCi == '0'}">
									<img alt=""
										src="/OffTheRecord/company_ci/${clist.companyCi}.png"
										class="img-responsive">
									</c:if>
									<c:if test="${clist.companyCi != '0'}">
									<img alt=""
										src="/OffTheRecord/company_ci/${clist.companyCi}"
										class="img-responsive">
									</c:if>
								</div>

								<div class="col-xs-10"
									onclick="location.href='/OffTheRecord/getCompanyReview.action?companyId=${clist.companyId }'">
									<h3>기업명 : ${clist.companyName}</h3>
									<c:set var="total_score" value="${clist.companyTotalScore}" />
										<c:set var="total_score_round"
											value="${ total_score+((total_score%1>0.5)?(1-(total_score%1))%1:-(total_score%1)) }" />
										<!-- 색깔있는 별 -->
										<c:forEach begin="1" end="${total_score_round}">
											<span><img alt="" src="/OffTheRecord/img/star1.png"></span>
										</c:forEach>
										<!-- 회색 별 -->
										<c:forEach begin="1" end="${5-total_score_round }">
											<span><img alt="" src="/OffTheRecord/img/star2.png"></span>
										</c:forEach>
										<font style="font-weight: bold;">${clist.companyTotalScore}점</font>
								</div>

								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
									onclick="location.href='/OffTheRecord/getCompanyReview.action?companyId=${clist.companyId }'">
									<hr size="1" color="lightgray">
								</div>

								<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"
									style="padding-bottom: 10px;">
									대표자 : ${clist.companyPresident }<br>
									주소 : ${clist.companyAddress } <a data-toggle="modal" href="#myModal"
										class="btn btn-success btn-xs"> 위치정보 보기 <c:set
											value="${clist.companyX }" var="x" /> <c:set
											value="${clist.companyY }" var="y" /> <span
										class="glyphicon glyphicon-search"></span>
									</a> <br>
									홈페이지 : <a
										href="http://${clist.companyUrl }">${clist.companyUrl }</a> <br>
									<br>
								</div>

								<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
									총 매출액 : ${clist.companySales }<br>
									연봉 : ${clist.companySalary }<br>
									<input
										type="hidden" id="companyId" value="${clist.companyId }">
									<a href="#" onclick="insertIC(${clist.companyId })"
										type="button" class="btn btn-danger btn-sm"> 관심기업 추가하기 <span
										class="glyphicon glyphicon-star"></span>
									</a>
								</div>
							</div>
							</div>
						</c:forEach>
						
					</c:otherwise>
		</c:choose>
	</div><!-- row -->
	</div><!-- container -->
	</c:if>
</body>
</html>